<template>
  <lt-drawer
    ref="playListDrawer"
    :height="300"
    :margin="75"
    :radius="10"
    is-header
    position="right"
  >
    <template #header>
      <div class="flex justify-between p-2">
        <div class="relative">
          <h4>播放列表</h4>
          <span class="text-gray-400! text-sm! song-count">{{ audioStore.playList.length }}</span>
        </div>
        <div class="flex cursor-pointer">
          <span class="iconfont icon-shanchu text-gray-400! text-sm!"></span>
          <span class="ml-1 text-gray-400! text-sm!">清空</span>
        </div>
      </div>
    </template>
    <div class="w-full py-3 px-2 overflow-y-auto">
      <div v-for="item in audioStore.playList" :key="item.id" class="mb-2" @click="playSong(item)">
        <div
          :class="audioStore.currentPlay.id === item.id ? 'active' : ''"
          class="flex curr-song py-2 px-2 rounded"
        >
          <avatar :size="40" :src="item?.picUrl"></avatar>
          <div class="flex-1 ml-2 flex items-center justify-between">
            <div>
              <div class="song_name">{{ item?.name }}</div>
              <div class="play-list-name">{{ item?.song?.artists[0].name }}</div>
            </div>
            <div>
              <span class="more_btn iconfont icon-aixin"></span>
              <span class="more_btn iconfont icon-xiazai mx-4"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </lt-drawer>
</template>
<script lang="ts" setup>
import useAudio from '../../../store/modules/audio-data'
import ltDrawer from '../../../base-ui/lt-drawer/lt-drawer.vue'
import avatar from '../../../base-ui/avatar/index.vue'
import { useTemplateRef } from 'vue'

const playListDrawer = useTemplateRef('playListDrawer')
const audioStore = useAudio()

const playSong = (e) => {
  audioStore.setCurrentPlay(e)
  audioStore.setPlayList(e)
  playListDrawer.value.close()
}

const open = () => {
  playListDrawer.value.open()
}
defineExpose({
  open
})
</script>

<style scoped>
.play-list-name {
  width: 100px;
  color: #5f6368;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.curr-song:hover {
  background-color: var(--active);
}

.active {
  background-color: var(--active);
}

.song-count {
  position: absolute;
  right: -9px;
  top: 0;
}
</style>
